@page "/Line_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <Line Config="config1" OnFirstRender="OnChart_Render" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <Line Config="config2" OnFirstRender="OnChart_Render" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <Line Data=data Config="config3" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <Line Config="config4" OnFirstRender="OnChart_Render" />
    </TabPane>
    <TabPane Key="5" Tab="Sample 5">
        <Line Config="config5" OnFirstRender="OnChart_Render" />
    </TabPane>
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Line @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    object[] data = new object[] {
        new  { year= "1991", value= 3 },
        new  { year= "1992", value= 4 },
        new  { year= "1993", value= 3.5 },
        new  { year= "1994", value= 5 },
        new  { year= "1995", value= 4.9 },
        new  { year= "1996", value= 6 },
        new  { year= "1997", value= 7 },
        new  { year= "1998", value= 9 },
        new  { year= "1999", value= 13 },
    };

    #region 示例1

    private async Task OnChart_Render(IChartComponent chart)
    {
        var data1 = await DemoData.FireworksSalesAsync(NavigationManager, HttpClient);
        await chart.ChangeData(data1);
    }

    LineConfig config1 = new LineConfig()
    {
        Padding = "auto",
        XField = "Date",
        YField = "scales",
        XAxis = new ValueCatTimeAxis()
        {
            TickCount = 5
        }
    };

    #endregion 示例1

    #region 示例2

    LineConfig config2 = new LineConfig()
    {
        Padding = "auto",
        XField = "Date",
        YField = "scales",
        XAxis = new ValueCatTimeAxis()
        {
            TickCount = 5
        },
        Smooth = true,
    };


    #endregion 示例2

    #region 示例3

    LineConfig config3 = new LineConfig()
    {
        Padding = "auto",
        XField = "year",
        YField = "value",
        Label = new Label()
        {
            Visible = true,
        },
        Point = new LineViewConfigPoint()
        {
            Size = 5,
            Shape = "diamond",
            Style = new GraphicStyle()
            {
                Fill = "white",
                Stroke = "#5B8FF9",
                LineWidth = 2
            }
        }
    };

    #endregion 示例3

    #region 示例4

    LineConfig config4 = new LineConfig()
    {
        Padding = "auto",
        XField = "Date",
        YField = "scales",
        XAxis = new ValueCatTimeAxis()
        {
            TickCount = 5
        },
        Slider = new Slider
        {
            Start = 0.1,
            End = 0.5
        }
    };

    #endregion 示例4

    #region 示例5

    LineConfig config5 = new LineConfig()
    {
            Padding = "auto",
            XField = "Date",
            YField = "scales",
        Annotation = new IAnnotation[]
        {
            new RegionFilterAnnotation()
            {
                Start = new []{"min","median"},
                End = new []{"max","0"},
                Color = "#F4664A"
            },
            new TextAnnotation()
            {
                Position = new []{"min","median"},
                Content = "中位数",
                OffsetY = -4,
                Style = new TextStyle()
                {
                    TextBaseline = "bottom"
                }
            },
            new LineAnnotation()
            {
                Start = new []{"min","median"},
                End = new []{"max","median"},
                Style = new GraphicStyle()
                {
                    Stroke = "#F4664A",
                    LineDash = new []{2,2}
                }
            }
        }
    };


    #endregion 示例5

}

